import React, { useEffect, useState } from 'react';
import { useDispatch } from 'umi';
import { getExamShilist, getExamType, getExamSubject } from '@/services/index';
import { Radio, Select, Button, Tag, Divider, Table, Space } from 'antd';
// import './_addQusetions.less';
//考试类型的选择器
const { Option } = Select;
function handleChange(value: any) {
  console.log(`selected ${value}`);
}
//试题的表单
const columns = [
  {
    title: '试卷信息',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '班级',
    dataIndex: 'grade_name',
    key: 'grade_name',
  },
  {
    title: '创建人',
    dataIndex: 'user_name',
    key: 'user_name',
  },
  {
    title: '开始时间',
    key: 'start_time',
    dataIndex: 'start_time',
  },
  {
    title: '结束时间',
    key: 'end_time',
    dataIndex: 'end_time',
  },
  {
    title: '操作',
    dataIndex: '编辑',
  },
];
const ListExam: React.FC = () => {
  //考试类型
  const [getExamKaoshi, setExamKaoshi] = useState<any[]>([]);
  //试题列表
  const [getExamShitiList, setExamShitiLList] = useState<any[]>([]);
  //课程
  const [getExamKeCheng, setExamKeCheng] = useState<any[]>([]);
  //
  const [b, setTime] = useState<any[]>([]);
  //考试类型的渲染
  useEffect(() => {
    getExamType().then((res) => {
      setExamKaoshi(res.data);
      //debugger;
    });
  }, []);
  //试题列表
  useEffect(() => {
    getExamShilist().then((res) => {
      setExamShitiLList(res.exam);
      //debugger;
      // console.log(res.data);
    });
  }, []);
  //课程
  useEffect(() => {
    getExamSubject().then((res) => {
      setExamKeCheng(res.data);
    });
  }, []);
  //转化时间戳
  useEffect(() => {
    setB();
  }, [getExamShilist]);
  async function setB(this: any) {
    let one = await getExamShilist();
    one.exam.forEach((item: any, index: any) => {
      item.start_time = new Date(+item.start_time).toLocaleString();
      item.end_time = new Date(+item.end_time).toLocaleString();
    });
    setTime(one.exam);
  }

  // 通过useDispatch拿到派发redux的dispatch
  const dispatch = useDispatch();
  useEffect(() => {
    //试卷列表
    dispatch({
      type: '/question/getExamShilist',
    });
    //考试类型
    dispatch({
      type: '/question/getExamType',
    });
    //课程
    dispatch({
      type: '/question/getExamSubject',
    });
  }, []);

  return (
    <div>
      <dl>
        <dt>考试类型:</dt>
        <dd>
          <Select style={{ width: 170 }} onChange={handleChange}>
            {getExamKaoshi.map((item, index) => {
              return (
                <Option value={index} key={index}>
                  {item.exam_name}
                </Option>
              );
            })}
          </Select>
        </dd>
        <dt>课程：</dt>
        <dd>
          <Select style={{ width: 170 }} onChange={handleChange}>
            {getExamKeCheng.map((item, index) => {
              return (
                <Option value={index} key={index}>
                  {item.subject_text}
                </Option>
              );
            })}
          </Select>
        </dd>
      </dl>
      {/* <> */}
        <div className="TabShiTi">
          <Table columns={columns} dataSource={b} />
        </div>
      </div>
  );
};
export default ListExam;